<template>
  <!--新歌首发设计-->
  <div class="newSong">
    <div class="newSong_title">
      新 歌 首 发
    </div>
      <ul class="newSong_type">
        <li>
          <span class="iconfont icon-bofangsanjiaoxing"></span>
          <span>播放全部</span>
        </li>
        <li :class="{select:currentIndex===index}" v-for="(type,index) in types" :key="index" @click="chooseType(index)">{{type}}</li>
      </ul>
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="(pages,index) in ChangeNewSong" :key="index">
            <div class="swiper-content" v-for="(page,index) in pages" :key="index">
              <div class="song_image"  :title="page.song_title">
                <div class="img-cover"></div>
                <img :src="page.album_pic">
                <div class="icon">
                  <span class="iconfont icon-bofang1"></span>
                </div>
              </div>
              <div class="song_info">
                <div class="songName" @click="getSong(page.song_mid,page.song_id)">{{page.song_name}}</div>
                <div class="singer ellipsis">
                  <span v-for="(singer,index) in page.singers" :key="index" @click="toSingerDetail(singer.mid)">{{singer.name}}&nbsp;</span>
                </div>
              </div>
              <div class="song_time">{{page.interval_str}}</div>
            </div>
          </div>
        </div>
        <!--分页样式-->
        <div class="swiper-pagination"></div>
        <!--前进后退-->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
      </div>
  </div>
</template>

<script>
  import {reqRecommendNewSong} from '../../../api/index'
  import Swiper from 'swiper';
  import 'swiper/css/swiper.min.css';
    export default {
        name: "RecommendNewSong",
        data(){
          return{
            currentIndex:0,
            types:['最新','内地','港台','欧美','韩国','日本'],
            newSongList:[],
          }
        },
        methods:{
          chooseType(index){
            this.currentIndex=index;
          },
          async getRecommendNewSong(){
            const response=await reqRecommendNewSong('1');
            const result=response.data;
            // console.log(result.data);
            for(let i=0;i<36;i++){
                this.newSongList.push(result.data.list[i]);
            }
            // console.log(this.newSongList);
          },
          getSong(song_mid,song_id){
              this.$router.replace({path:'/songDetail',query:{song_mid,song_id}})
          },
          toSingerDetail(mid){
            this.$router.replace(`/singerdetail/${mid}`);
          }
        },
        mounted(){
          this.getRecommendNewSong();
        },
        computed:{
          //将newSongList分类整理
          ChangeNewSong(){
              let outterArr=[],innerArr=[];
              this.newSongList.forEach(list=>{
                if(innerArr.length!==8){
                  innerArr.push(list);
                }else{
                  innerArr.push(list);
                  outterArr.push(innerArr);
                  innerArr=[];
                }
              })
              return outterArr;
          }
        },
        watch:{
          //当数据加载成功以后，再响应滑动事件
          ChangeNewSong(value){
            this.$nextTick(()=>{
              new Swiper('.swiper-container', {
                // autoplay:true,
                loop:true,
                speed:2000, // 播放的速度
                // 如果需要分页器，即下面的小圆点
                pagination: {
                  el:'.swiper-pagination',
                },
                // 如果需要前进后退按钮
                navigation: {
                  nextEl: '.swiper-button-next',
                  prevEl: '.swiper-button-prev',
                }
              })
            })
          }
        }
    }
</script>

<style scoped lang="less">
  .newSong{ width:100%;background:linear-gradient(to bottom,#f2f2f2,#fafafa);text-align: center;margin: 0 auto;position:relative;}
  .newSong .newSong_title{font-size: 30px;font-weight: bolder;padding-top: 50px;}
  .newSong .newSong_type{overflow: hidden;position: relative;margin: 0 auto;width: 1200px;}
  .newSong .newSong_type li{display: inline-block;margin: 35px 25px;}
  .newSong .newSong_type li.select{color: #31c27c;}
  .newSong .newSong_type li:hover{cursor: pointer;color: #31c27c;}
  .newSong .newSong_type li:first-child{position:absolute;left:0px;height: 33px;width: 108px;border: 1px solid #c9c9c9;line-height: 33px;margin-left: 0;margin-top: 29px;}
  .newSong .newSong_type li:first-child:hover{background: #ededed;cursor: pointer;color: initial;}
  /*实现新歌首发轮播效果*/
  .newSong{
    .swiper-container{
      padding-bottom: 30px;
      .swiper-wrapper{
        left: 50%;
        margin-left: -600px;
        .swiper-slide{
          display: inline-block;
          .swiper-content{
            float: left;
            display: flex;
            flex-direction:row;
            width: 380px;
            padding: 10px 0px;
            margin: 0px 10px;
            box-sizing: border-box;
            position: relative;
            border-bottom: 1px solid #eee;
            .song_image{
              margin-right: 10px;
              position: relative;
              /*添加阴影蒙版*/
              .img-cover{
                width:100%;
                height:86px;
                position:absolute;
                background-color: rgba(0,0,0,0.3);
                top:0;
                right: 0;
                opacity: 0;
                z-index: 1;
              }
              &:hover{
                .icon{
                  opacity: 1;
                  transform: scale(1.1);
                }
                .img-cover{
                  opacity: 1;
                }
                img{
                  /*transform: scale(1.1);*/
                }
              }
              >img{
                width: 86px;
              }
              .icon{
                z-index:1;
                position: absolute;
                width: 35px;
                height: 35px;
                background-color: white;
                top: 30%;
                left: 0;
                right: 0;
                margin: auto;
                border-radius: 50%;
                opacity: 0;
                transition: all 1s;
                .icon-bofang1{
                  font-size: 20px;
                  position: absolute;
                  top: 50%;
                  margin-top: -8px;
                  left: 50%;
                  margin-left: -8px;
                }
              }
            }
            .song_info{
              text-align: left;
              cursor: pointer;
              line-height: 2.5;
              font-size: 14px;
              .songName{
                cursor: pointer;
                &:hover{
                  color: #31c27c;
                }
              }
              .singer{
                width: 300px;
                color: #999;
                &:hover{
                  color: #31c27c;
                  cursor:pointer;

                }

              }
            }
            .song_time{
              line-height: 2.5;
              position: absolute;
              right: 0;
              color: #999;
            }
          }

        }
      }
      .swiper-button-prev,.swiper-button-next{
        color: rgba(0,0,0,0.7);
        top: 30%;
        background-color: #efeeef;
        padding: 20px 10px;
      }
    };
  }

</style>
